<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <audio
      src="https://music.163.com/song/media/outer/url?id=1922931099.mp3"
      controls
    ></audio>

    <div class="box">
      <ul></ul>
    </div>
    <style>
      .box {
        width: 300px;
        height: 300px;
        background-color: lightblue;
        overflow: hidden;
      }
      li.active {
        color: red;
      }
    </style>
    <script>
      var str =
        "[00:00.000] 作词 : 九把刀\n[00:01.000] 作曲 : 韦礼安/JerryC\n[00:13.32]你的声音 解开了故事的谜语\n[00:19.85]落下一万年的约定\n[00:25.09]大树下的你 红色围巾 手心里捧的雨\n[00:31.40]哭了笑了 除了你还是你\n[00:35.87]\n[00:38.37]我们 如果又一次错过 不敢牵起你的手\n[00:46.04]我会多么寂寞 等待红线来的时候\n[00:51.09]\n[00:51.36]如果可以 我想和你回到那天相遇\n[00:57.32]让时间停止 那一场雨\n[01:02.38]只想拥抱 你在身边的证据 吻你的呼吸\n[01:09.91]一眨眼 一瞬间 你说好就是永远\n[01:16.02]不会变\n[01:20.22]\n[01:35.03]大树下的你 红色围巾 手心里捧的雨\n[01:42.04]哭了笑了 除了你还是你\n[01:47.23]\n[01:48.49]我们 如果又一次错过 不敢牵起你的手\n[01:55.99]如果没有如果 等到红线来的时候\n[02:01.19]\n[02:01.53]如果可以 我想和你回到那天相遇\n[02:07.78]让时间停止 那一场雨\n[02:12.75]只想拥抱 你在身边的证据 吻你的呼吸\n[02:20.13]一眨眼 一瞬间 你说好就是永远\n[02:26.62]\n[02:27.35]如果可以 茫茫人海千年一眼相遇\n[02:33.27]月光下转身 那就是你\n[02:38.05]红线划过 深藏轮回的秘密 我挥霍运气\n[02:45.51]因为你 才让我 背对命运不害怕\n[02:52.33]\n[02:52.67]靠近了 相信了 到底我们爱得有多狼狈\n[03:02.14]暴雨狂风也不想防备\n[03:05.54]爱了 就爱了 只刻在我们泪光的约定 火开出了花\n[03:17.60]\n[03:18.33]如果可以 我想和你回到那天相遇\n[03:24.42]让时间停止 那一场雨\n[03:29.40]只想拥抱 你在身边的证据 吻你的呼吸\n[03:36.42]一眨眼 一万年 留给我别困住你\n[03:43.75]\n[03:44.06]如果可以 茫茫人海千年一眼相遇\n[03:50.03]月光下转身 那就是你\n[03:55.34]红线划过 深藏轮回的秘密 我花光运气\n[04:01.99]你是我 赌上世界的 决定\n[04:13.07]\n[04:20.89]\n";

      // 解析歌词
      var parseLyric = (strLyric) => {
        return strLyric
          .split("\n")
          .filter((s) => s)
          .map((s) => {
            var yy = s.match(/^\[(\d{2}:\d{2}\.\d{2,3})\](.*)/);
            var timeArr = yy[1].split(":");
            return {
              time: timeArr[0] * 60 + timeArr[1] * 1,
              text: yy[2],
            };
          });
      };

      var parsedLyric = parseLyric(str);

      // 查找歌词
      var findLyric = (parsedLyric, currentTime) => {
        var lts = parsedLyric.filter((o) => o.time < currentTime);
        return {
          index: lts.length - 1,
          lyric: lts[lts.length - 1],
        };
      };

      // console.log(findLyric(parsedLyric, 21));

      // 渲染dom
      parsedLyric.forEach((element) => {
        var node = document.createElement("li");
        node.innerText = element.text;
        document.querySelector(".box ul").appendChild(node);
      });

      var audioDom = document.querySelector("audio");
      audioDom.ontimeupdate = function () {
        // console.log(audioDom.currentTime);

        var x = findLyric(parsedLyric, audioDom.currentTime);
        // console.log(x);

        // 查到找的歌词与 索引
        // 对应 li 高亮
        document.querySelectorAll(".box ul li").forEach((el, idx) => {
          if (idx === x.index) {
            el.classList.add("active");
          } else {
            el.classList.remove("active");
          }
        });

        // 找到高亮之前的所有的li  然后获取每一个的高度
        var ltDoms = [...document.querySelectorAll(".box ul li")].slice(
          0,
          x.index
        );
        // console.log(ltDoms[0].offsetHeight);
        var offsetH = ltDoms.reduce(function (total, element) {
          return total + Number(element.offsetHeight);
        }, 0);
        console.log(offsetH);
        document.querySelector(
          ".box ul"
        ).style.transform = `translateY(${-offsetH}px)`;
      };
    </script>
    <!-- <script>
      var str =
        "[00:00.000] 作词 : 九把刀\n[00:01.000] 作曲 : 韦礼安/JerryC\n[00:13.32]你的声音 解开了故事的谜语\n[00:19.85]落下一万年的约定\n[00:25.09]大树下的你 红色围巾 手心里捧的雨\n[00:31.40]哭了笑了 除了你还是你\n[00:35.87]\n[00:38.37]我们 如果又一次错过 不敢牵起你的手\n[00:46.04]我会多么寂寞 等待红线来的时候\n[00:51.09]\n[00:51.36]如果可以 我想和你回到那天相遇\n[00:57.32]让时间停止 那一场雨\n[01:02.38]只想拥抱 你在身边的证据 吻你的呼吸\n[01:09.91]一眨眼 一瞬间 你说好就是永远\n[01:16.02]不会变\n[01:20.22]\n[01:35.03]大树下的你 红色围巾 手心里捧的雨\n[01:42.04]哭了笑了 除了你还是你\n[01:47.23]\n[01:48.49]我们 如果又一次错过 不敢牵起你的手\n[01:55.99]如果没有如果 等到红线来的时候\n[02:01.19]\n[02:01.53]如果可以 我想和你回到那天相遇\n[02:07.78]让时间停止 那一场雨\n[02:12.75]只想拥抱 你在身边的证据 吻你的呼吸\n[02:20.13]一眨眼 一瞬间 你说好就是永远\n[02:26.62]\n[02:27.35]如果可以 茫茫人海千年一眼相遇\n[02:33.27]月光下转身 那就是你\n[02:38.05]红线划过 深藏轮回的秘密 我挥霍运气\n[02:45.51]因为你 才让我 背对命运不害怕\n[02:52.33]\n[02:52.67]靠近了 相信了 到底我们爱得有多狼狈\n[03:02.14]暴雨狂风也不想防备\n[03:05.54]爱了 就爱了 只刻在我们泪光的约定 火开出了花\n[03:17.60]\n[03:18.33]如果可以 我想和你回到那天相遇\n[03:24.42]让时间停止 那一场雨\n[03:29.40]只想拥抱 你在身边的证据 吻你的呼吸\n[03:36.42]一眨眼 一万年 留给我别困住你\n[03:43.75]\n[03:44.06]如果可以 茫茫人海千年一眼相遇\n[03:50.03]月光下转身 那就是你\n[03:55.34]红线划过 深藏轮回的秘密 我花光运气\n[04:01.99]你是我 赌上世界的 决定\n[04:13.07]\n[04:20.89]\n";
      var arr = str.split("\n");

      //   console.log(arr);
      var zz = arr
        .filter((s) => s)
        .map((s) => {
          var yy = s.match(/^\[(\d{2}:\d{2}\.\d{2,3})\](.*)/);
          var timeArr = yy[1].split(":");

          return {
            time: timeArr[0] * 60 + timeArr[1] * 1,
            text: yy[2],
          };
        });

      console.log(zz);

      var xx = "[00:25.09]大树下的你 红色围巾 手心里捧的雨";
      var xx = "[04:20.89]";
      var xx = "";

      //   var yy = xx.match(/^\[\d{2}:\d{2}\.\d{2,3}\]/);
      //   console.log(yy);

      var yy = xx.match(/^\[(\d{2}:\d{2}\.\d{2,3})\](.*)/);
      console.log(yy);

      document.querySelector("audio").ontimeupdate = function () {
        console.log(this.currentTime);

        var allLt = zz.filter((o) => o.time < this.currentTime);
        console.log(allLt[allLt.length - 1]);
      };
    </script> -->
  </body>
</html>
